﻿<UserControl x:Class="FormValidationExample.View.MainView"
			 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
			 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
			 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
			 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
			 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
			 xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
			 xmlns:View="clr-namespace:FormValidationExample.View"
			 xmlns:ViewModel="clr-namespace:FormValidationExample.ViewModel"
			 x:Name="userControl"
			 mc:Ignorable="d"
			 d:DataContext="{d:DesignInstance ViewModel:MainViewModel}"
			 RenderTransformOrigin="0.5,0.5">

	<Grid Background="Gray">
		<i:Interaction.Behaviors>
			<ei:DataStateBehavior Binding="{Binding IsValid}"
								  Value="True"
								  TrueState="ValidState"
								  FalseState="InvalidState" />
		</i:Interaction.Behaviors>

		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="ValidationSummaryStates">
				<VisualState x:Name="ValidState">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
													   Storyboard.TargetName="ValidSummaryContainer">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)"
													   Storyboard.TargetName="BackgroundOverlayBorder">
							<EasingDoubleKeyFrame KeyTime="0:0:1"
												  Value="0.5" />
							<EasingDoubleKeyFrame KeyTime="0:0:2"
												  Value="0" />
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
				<VisualState x:Name="InvalidState">
					<Storyboard>
						<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)"
													   Storyboard.TargetName="ErrorsSummaryContainer">
							<DiscreteObjectKeyFrame KeyTime="0">
								<DiscreteObjectKeyFrame.Value>
									<Visibility>Visible</Visibility>
								</DiscreteObjectKeyFrame.Value>
							</DiscreteObjectKeyFrame>
						</ObjectAnimationUsingKeyFrames>
						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)"
													   Storyboard.TargetName="border">
							<EasingDoubleKeyFrame KeyTime="0:0:0.066"
												  Value="-10" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.134"
												  Value="10" />
							<EasingDoubleKeyFrame KeyTime="0:0:0.2"
												  Value="0" />
						</DoubleAnimationUsingKeyFrames>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>

		<Border x:Name="BackgroundOverlayBorder"
				Background="#FF06C409"
				Opacity="0" />

		<Border x:Name="border"
				Width="600"
				MinHeight="600"
				Background="White"
				CornerRadius="5"
				VerticalAlignment="Center"
				HorizontalAlignment="Center"
				Padding="20"
				RenderTransformOrigin="0.5,0.5">
			<Border.RenderTransform>
				<TransformGroup>
					<ScaleTransform />
					<SkewTransform />
					<RotateTransform />
					<TranslateTransform />
				</TransformGroup>
			</Border.RenderTransform>
			<Border.Effect>
				<DropShadowEffect Color="#FF252525"
								  Opacity="0.7" />
			</Border.Effect>
			<Grid>
				<Grid.RowDefinitions>
					<RowDefinition Height="Auto" />
					<RowDefinition Height="*" />
					<RowDefinition Height="Auto" />
				</Grid.RowDefinitions>

				<TextBlock Grid.Row="0"
						   Text="Registration Form - Validation Example"
						   FontSize="20"
						   Foreground="Gray" />

				<View:FormControl Grid.Row="1"
								  Margin="0,20,0,0" />

				<Grid Grid.Row="2">
					<Grid.ColumnDefinitions>
						<ColumnDefinition Width="*" />
						<ColumnDefinition Width="Auto" />
					</Grid.ColumnDefinitions>

					<Grid x:Name="ErrorsSummaryContainer"
						  Grid.Column="0"
						  Visibility="Collapsed"
						  Margin="0,10,10,0">

						<Grid.RowDefinitions>
							<RowDefinition Height="Auto" />
							<RowDefinition Height="Auto" />
						</Grid.RowDefinitions>

						<TextBlock Text="Plase correct the following errors before proceeding:"
								   Foreground="Red"
								   FontWeight="Bold" />
						<TextBlock Grid.Row="1"
								   Text="{Binding ValidationErrorsString}"
								   Foreground="Red"
								   Margin="0,5,0,0" />

					</Grid>

					<Grid x:Name="ValidSummaryContainer"
						  Grid.Column="0"
						  Visibility="Collapsed"
						  VerticalAlignment="Center"
						  HorizontalAlignment="Left"
						  Margin="0,10,5,0">
						<TextBlock Text="Congratulations! You successfully completed the form!"
								   Foreground="Green"
								   FontSize="14" />
					</Grid>

					<Border Grid.Column="1"
							HorizontalAlignment="Right"
							VerticalAlignment="Bottom"
							Margin="0,10,0,0">
						<Button Content="Validate"
								Command="{Binding ValidateCommand}"
								Padding="10" />
					</Border>

				</Grid>
			</Grid>

		</Border>
	</Grid>
</UserControl>
